<template>
  <div>
    <div>
      <el-input
        size="small"
        class="addJobLevelInput"
        placeholder="添加职称..."
        suffix-icon="el-icon-plus"
        v-model="jLevel.name"
      ></el-input>
       <el-select v-model="jLevel.titleLevel" placeholder="职称等级" size="small" class="selectJobLevel">
        <el-option
          v-for="item in titleLevels"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-button
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="addJobLevel"
        >添加</el-button
      >
    </div>
    <div class="jobLevelManaMain">
      <el-table stripe border :data="jLevels" style="width: 60%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column prop="id" label="编号" width="70px" align="center">
        </el-table-column>
        <el-table-column prop="name" label="职称名称" width="150px" align="center">
        </el-table-column>
        <el-table-column prop="titleLevel" label="职称等级" width="150px" align="center">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建时间"
          width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="enabled" label="是否启用" width="150px" align="center">
          <template slot-scope= "scope">
            <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
            <el-tag type="danger" v-else>未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="danger" size="small" style="margin-top: 8px" :disabled = "multipleSelection.length == 0" @click="deleteAll()">批量删除</el-button>
    <el-dialog title="修改职称" :visible.sync="dialogVisible" width="25%">
      <div>
        <table>
          <tr>
            <td>
              <el-tag>职称名称</el-tag>
            </td>
            <td>
              <el-input
                v-model="updataJLevel.name"
                size="small"
                class="updatePostInput"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>职称等级</el-tag>
            </td>
            <td>
              <el-select v-model="updataJLevel.titleLevel"  size="small" class="selectJobLevel">
                <el-option
                  v-for="item in titleLevels"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>是否启用</el-tag>
            </td>
            <td>
              <el-switch
                style="margin-left: 6px;"
                v-model="updataJLevel.enabled"
                active-text="已启用"
                inactive-text="未启用"
                >
              </el-switch>
            </td>
          </tr>
        </table>
        
        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdateJobLevel()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: "jobLevelMana",
    created(){
      this.initJobLevels();
    },
    data(){
      return{
        jLevel:{
          name:'',
          titleLevel:'',
        },
        updataJLevel:{
          name:'',
          titleLevel:'',
          enabled:'',
        },
        titleLevels: [
          '员级',
          '初级',
          '中级',
          '副高级',
          '正高级'
        ],
        jLevels: [],
        dialogVisible: false,
        multipleSelection: [],
      }
    },
    methods:{
      deleteAll(){
        this.$confirm(
          "此操作将永久删除[" + this.multipleSelection.length + "]条职称, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            var ids = '?';
            this.multipleSelection.forEach(item => {
              ids += 'ids=' + item.id + '&';
            });
            this.$deletefn("/system/basic/jobLevel/" + ids).then((res) => {
              if (res) {
                this.initJobLevels();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      submitUpdateJobLevel(){
        this.$put('/system/basic/jobLevel/',this.updataJLevel).then(res => {
          if(res){
            this.initJobLevels();
            this.dialogVisible = false;
          }
        })
      },
      addJobLevel(){
        if(this.jLevel.name && this.jLevel.titleLevel){
          this.$post('/system/basic/jobLevel/',this.jLevel).then(res =>{
            if(res){
              this.initJobLevels();
              this.jLevel.name = '';
              this.jLevel.titleLevel = '';
            }
          })
        }else{
          this.$message.error("字段不能为空！")
        }
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      handleEdit(data){
        Object.assign(this.updataJLevel,data);
        this.dialogVisible = true;
      },
      handleDelete(data){
        this.$confirm(
          "此操作将永久删除[" + data.name + "]职称, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.$deletefn("/system/basic/jobLevel/" + data.id).then((res) => {
              if (res) {
                this.initJobLevels();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      initJobLevels(){
        this.$get('/system/basic/jobLevel/').then(res=>{
          if(res){
            this.jLevels = res;
          }
        })
      }

    },
}
</script>

<style scoped>
.addJobLevelInput{
    width: 300px;
    margin-right: 6px;
}
.selectJobLevel{
    margin-right: 6px;
}
.jobLevelManaMain{
  margin-top:8px
}
</style>